<template>
  <div class="hello">
    <heaDer></heaDer>
    <div class="searchtitle flex_lr_m" style="position: relative">
      <div style="width: 65%">
        <!-- <el-input v-model="searchInfo" placeholder="请输入内容"></el-input> -->
        <van-field
          v-model="searchInfo"
          placeholder="请输入标题"
          style="
            border: 1px solid #ebedf0;
            padding: 5px 10px;
            border-radius: 20px;
          "
        />
      </div>
      <el-button
        icon="el-icon-search"
        circle
        @click="searchSend"
        style="
          height: 36px;
          border: none;
          position: absolute;
          left: 50%;
          background: transparent;
        "
      ></el-button>
      <div style="margin-left: 0%; width: 30%">
        <!-- <el-select v-model="searchValue" placeholder="请选择">
          <el-option
            v-for="item in articleStates"
            :key="item.type"
            :label="item.label"
            :value="item.type"
          >
          </el-option>
        </el-select> -->
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="articleStates"
          @select="onSelect"
        >
          <template #reference>
            <van-button
              style="width: 100%; height: 36px; border-radius: 20px"
              type="default"
              icon="arrow-down"
              icon-position="right"
            >
              {{ searchValue }}
            </van-button>
          </template>
        </van-popover>
      </div>
      <div></div>
    </div>

    <!-- <div style="width: 100%; background-color: black">
      <div
        style="
          height: 48px;
          display: flex;
          justify-content: space-between;
          color: #fff;
          align-items: center;
          width: 95%;
          margin: 0 auto;
        "
      >
        <router-link
          to="/index"
          tag="div"
          style="width: 0.8rem; margin-left: 10px; transform: rotate(180deg)"
          ><img src="../assets/img20.png" width="100%"
        /></router-link>
        <div>微信积分系统</div>
        <div style="width: 0.5rem; margin-left: 10px"></div>
      </div>
    </div> -->
    <!-- <div style="background-color: #f1f1f0; width: 100%; padding: 10px 0">
      <div
        style="
          display: flex;
          justify-content: space-between;
          width: 90%;
          margin: 0 auto;
        "
      >
        <div style="display: flex; align-items: center">
          <div style="width: 40px">
            <img :src="userinfo.usericon" width="100%" />
          </div>
          <div>{{ userNameInfo }}</div>
        </div>
        <div style="display: flex; align-items: center">
          <div style="width: 20px">
            <img src="../assets/img5.png" width="100%" />
          </div>
          <div style="padding-left: 10px">
            积分<span style="color: orange">{{ userinfo.nowPoints }}</span>
          </div>
        </div>
      </div>
    </div> -->
    <!-- <div
      style="
        padding: 10px 0;
        border-radius: 30px;
        box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
        width: 94%;
        margin: 10px auto;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      "
      @click="showPic"
    >
      <div style="padding: 0 20px; display: flex; align-items: center">
        <div style="width: 20px; padding-right: 5px">
          <img src="../assets/img2.png" width="100%" />
        </div>
        <div>
          <div>推荐有礼</div>
          <div style="color: #c3c3c3">推荐好友，获得积分</div>
        </div>
      </div>
      <div style="padding: 0 20px; display: flex; align-items: center">
        <div>立即推荐</div>
        <div style="width: 15px; padding: 3px">
          <img src="../assets/img20.png" width="100%" />
        </div>
      </div>
    </div> -->
    <div class="topstyle">
      <!-- <div>
        阅读一篇文章获得<span style="color: orange">10</span
        >积分,每日最多获得<span style="color: orange">50</span>积分
      </div>
      <div>
        分享文章获得<span style="color: orange">20</span>积分,每日最多获得<span
          style="color: orange"
          >60</span
        >积分
      </div> -->
      <div>阅读文章和转发文章获得积分。</div>
    </div>
    <div
      style="width: 50%; text-align: center; margin: 5% auto"
      v-show="xianshi"
    >
      <van-loading />
    </div>
    <div v-show="yincang">
      <div class="zwxximg">
        <img src="../assets/zwxx.png" alt="" />
      </div>
      <div class="zwxx">暂无结果</div>
    </div>

    <div class="articlelists" v-for="(item, index) in list" :key="index">
      <div class="timeartic">{{ item.createTime }}</div>
      <div class="artichead">
        <div class="firstartic">
          <div class="firstbut" @click="cilckRead(item)" >
            <div class="secimg2" v-if="item.state == 1"
              >
               <img src="../assets/right1.png" alt="" /></div
            >
          </div>
          <img :src="item.pic" alt=""  />
          <div class="firsttitle ">
			  <div class="two_line">{{ item.title }}</div>
            
          </div>
        </div>
        <div
          class="secoundstartic"
          v-for="(i, index) in item.articles"
          :key="index"
          @click="cilckRead(i)"
        >
        
          <div class="sectitle" :style="index==item.articles.length-1?'border:none;':''">
            <div class="sectitlebo two_line">
              {{ i.title }}
            </div>
          </div>
          <div class="secimg"><img :src="i.pic" alt="" /></div>

          <div class="secimg1" v-if="i.state == 1">
            <img src="../assets/right1.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- //海报 -->
    <div
      style="
        position: fixed;
        z-index: 1;
        min-height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        background-color: white;
        opacity: 0.55;
      "
      @click="showPic"
      v-show="diaIsShow"
    ></div>
    <div
      style="
        position: fixed;
        top: 25vh;
        height: calc(80vw * 1.5);
        width: 80vw;
        margin-left: 10vw;
        padding-top: 10px;
        border-radius: 25px;
        border: 2px solid #73ad21;
        background-color: white;
        text-align: center;
        z-index: 2;
        box-shadow: 10px 10px 5px #888888;
      "
      v-show="diaIsShow"
    >
      长按图片保存海报
      <div
        ref="imageTofile"
        :style="{
          height: 'calc(70vw*1.5)',
          width: '70vw',
          overflow: 'hidden',
          'margin-left': '5vw',
        }"
        v-show="isShow"
      >
        <img
          style="
            height: calc(70vw * 1.5);
            width: 70vw;
            position: absolute;
            left: 5vw;
          "
          :src="backgroundBase64"
        />
        <img
          style="
            height: calc(70vw * 0.25);
            width: calc(70vw * 0.25);
            margin: calc(80vw * 0.875) -10vw;
            position: absolute;
            z-index: 999;
          "
          :src="QRcodeBase64"
        />
      </div>

      <img
        :style="{
          height: 'calc(70vw*1.5)',
          width: '70vw',
        }"
        :src="outUrl"
        v-show="!isShow"
      />
    </div>
  </div>
</template>

<script>
import { getToken, setToken, removeToken, delToken } from "@/utils/auth";
import html2canvas from "html2canvas";
import { MessageBox, Toast } from "mint-ui";
import heaDer from "@/components/page/header/header.vue";
import request from "@/utils/request";
export default {
  name: "integral",
  props: {
    msg: String,
  },
  components: {
    heaDer,
  },
  data() {
    return {
      xianshi: true,
      yincang: false,
      showPopover: false,
      // 生成图片
      backgroundBase64: "",
      QRcodeBase64: "",
      outUrl: "",
      isShow: true,
      diaIsShow: false,
      list: [],
      userinfo: {},
      userNameInfo: "",
      ArticleList: [
        {
          title:
            "新观念|如果你给予的是自由散养的教育，那么这件事，将决定孩子真正的走向！",
          releaseTime: "2021-11-03",
          image: require("../assets/jiatu.jpg"),
          list: [
            {
              page:
                "谈经验|寒假快来了，要不要带孩子去旅行看世界？爸妈看完这篇心里更有底！",
              image: require("../assets/right.png"),
              status: 0,
            },
            {
              page:
                "新有意思|如果你给予的是自由散养的教育，那么这件事，将决定孩子真正的走向！",
              image: require("../assets/error.png"),
              status: 0,
            },
            {
              page:
                "小测试|如果你给予的是自由散养的教育，那么这件事，将决定孩子真正的走向！",
              image: require("../assets/right.png"),
              status: 1,
            },
            {
              page:
                "新观念|如果你给予的是自由散养的教育，那么这件事，将决定孩子真正的走向！",
              image: require("../assets/error.png"),
              status: 0,
            },
          ],
        },
      ],
      searchInfo: "",
      searchValue: "全部",
      searchId: "",
      icon: "arrow-down",
      articleStates: [],
    };
  },
  async mounted() {
    await this.pageRead();
    await this.toTipList();
    // await this.topHeader();
    // await this.getImage();
    // await this.registerDay();   
	
	var isPageHide = false;
	  window.addEventListener('pageshow', function () {
		   if (isPageHide) {
				window.location.reload();
			}
	 });
	 window.addEventListener('pagehide', function () {
		   isPageHide = true;
	 });
  },
  methods: {
    onSelect(action) {
      console.log(action);
      this.searchValue = action.text;
      this.searchId = action.id;
      this.searchSend();
    },
    //无感支付
    registerDay() {
      return request({
        url: "/generator/user/front/register",
        method: "get",
      }).then((response) => {
        console.log(response.status);
        if (response.status == 0) {
          Toast({
            message: response.message,
            iconClass: "glyphicon glyphicon-ok",
          });
        }
      });
    },
    getImage() {
      let query = { userId: 1, page: "jifen" };
      return request({
        url: "/generator/poster/front/poster",
        method: "get",
        params: query,
      }).then((response) => {
        this.backgroundBase64 =
          "data:image/png;base64," + response.poster.backPic;
        this.QRcodeBase64 = "data:image/png;base64," + response.qrcode;
        // setTimeout(()=>this.toImage(), 100);
      });
    },
    showPic() {
      this.topHeader();
      this.diaIsShow = !this.diaIsShow;
      this.backgroundBase64;
      this.QRcodeBase64;
      if (this.diaIsShow) {
        console.log("分享积分");
        this.getNummo();
        setTimeout(() => this.toImage(), 100);
      } else {
        this.isShow = true;
      }
    },
    getNummo() {
      request({
        url: "/generator/poster/front/posterPoint",
        method: "get",
      }).then((response) => {
        console.log(response);
      });
    },
    toImage() {
      // TODO开始生成
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
      }).then((canvas) => {
        // TODO结束生成
        let url = canvas.toDataURL("image/png");
        this.outUrl = url;
        console.log(this.outUrl);
        if (this.outUrl) {
          this.isShow = false;
        }
      });
    },
    async cilckRead(row) {
     await this.topHeader();
      console.log("点击阅读", row.type);
     await this.toGetPoint(row)
	  // return
      if (row.type == 2) {
        console.log("页面跳转");
        let rowall = JSON.stringify(row.id);
		let userId=window.localStorage.getItem('userId')
        this.$router.push({ name: "detailPage", query: { row: rowall,shareUserId:userId },params:{time:new Date().getTime()} });
      } else {
		  window.location.href=row.interlinkage
        // location.href = row.interlinkage;
      }
    },
    pageRead() {
      let query = {
        pageNum: 1,
        pageSize: 20,
      };
      return request({
        url: "/generator/article/front/list",
        method: "get",
        params: query,
      }).then((response) => {
        // console.log(response.list);
        for(var i=0;i<response.list.length;i++){
          response.list[i].createTime=response.list[i].createTime.slice(0,10)
		  // this.QRcodeBase64 = "data:image/png;base64," + response.qrcode;
        }
        this.list = response.list;
        this.xianshi = false;
        if (this.list == "") {
          console.log('走着')
          this.yincang = true;
        }else{
           this.yincang = false;
        }
      });
    },
	toGetPoint(row){
		let query = { articleId: row.id };
		return request({
		  url: "/generator/article/front/getpoints",
		  method: "get",
		  params: query,
		}).then((response) => {
				if(response.message!='今日已阅读该本文'){
					Toast(response.message);
				}
		  
		  // window.open(`${row.interlinkage}`);
		});
	},
    topHeader() {
      return request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        console.log(response.user);
        this.userinfo = response.user;

        if (response.user.truename != null) {
          this.userNameInfo = response.user.truename;
        } else {
          this.userNameInfo = response.user.username;
        }
      });
    },
    searchSend() {
      let query = {
        pageNum: 1,
        pageSize: 20,
        title: this.searchInfo,
        tag: this.searchValue != "全部" ? this.searchValue : "",
      };
      console.log(query);
      request({
        url: "/generator/article/front/list",
        method: "get",
        params: query,
      }).then((response) => {
        console.log(response);
        this.list = response.list;
            if (this.list == "") {
          console.log('走着')
          this.yincang = true;
        }else{
          this.yincang = false;
        }
      });
    },
    // 标签列表
    toTipList() {
      return request({
        url: "/generator/articletag/front/list",
        method: "get",
      }).then((response) => {
        response.list.map((item) => {
          item.text = item.name;
        });
        let arr = [{ text: "全部", id: "" }];
        this.articleStates = arr.concat(response.list);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.articlelists {
  // border: 1px solid red;
  padding: 15px;
}
.artichead {
  // border: 1px solid #ddd;
  background: #fff;
  border-radius: 5px;
  // box-shadow: 0 5px 10px #ddd;
}
.firstartic {
  position: relative;
  height: 155px;
  overflow: hidden;
      display: flex;
	 
    align-items: center;
  img {
    // border-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    // height: 155px;
  }
}
.firstbut {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 100%;
  height: 100%;
}
.firstbut .elbut {
  color: #ffff;
  background: #b4cee1;
}
.readnum {
  padding: 0 10px;
  position: absolute;
  left: 0;
  bottom: 30px;
  color: #ffff;
}
.firsttitle {
  // border: 1px solid red;
  padding: 8px 10px;
  position: absolute;
  left: 0;
  bottom: 0px;
  color: #ffff;
  font-weight: bold;
  width:100%;
  // line-height: 30px;
  background-image: linear-gradient(rgba(126, 126, 126, 0.0), rgba(0, 0, 0, .6));
}
.secoundstartic {
  position: relative;
  // border: 1px solid red;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin:0 15px;
  align-items: center;
  // padding-bottom: 2%;
}
.sectitle {
  border-bottom: 1px solid #f1f3f4;
  // height: 60px;
  width: 80%;
  min-height: 60px;
  display: flex;
  align-items: center;
}
.secoundstartic:last-child {
  border-bottom: none;
  // border: 1px solid red;
}
.sectitlebo {
  // height: 42px;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
  // overflow: hidden;
    font-size: 13px;
    // display: flex;
    // align-items: center;
    margin-bottom: 0px;
    font-weight: 600;
}
.secimg {
  // border: 1px solid red;
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
    // border-radius: 10px;
  }
}
.secimg1 {
  position: absolute;
  right: -10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  img {
    width: 100%;
    height: 100%;
    opacity: 0.9;
  }
}
.secimg2 {
  position: absolute;
    right: 0px;
    top: 0;
    width: 50px;
    height: 50px;
  img {
    width: 100%;
    height: 100%;
    opacity: 0.9;
  }
}
.timeartic {
  text-align: center;
  padding-bottom: 10px;
  color: #707070;
  font-size: 12px;
}
.topstyle {
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  padding: 10px;
}
.readcount {
  color: #d2d5d8;
  height: 25px;
}
.searchtitle {
  display: flex;
  padding: 10px 0;
  width: 90%;
  margin: 0 auto;
  div {
    // margin: 0 5px;
  }
}
.zwxximg {
  widows: 100%;
  text-align: center;
  margin-top: 8%;
}
.zwxx {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.van-popover__wrapper {
  width: 100%;
}
.van-button--normal {
  padding: 0 5px;
  font-size: 14px;
}
.van-button__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.hello{
  background: #ededed;
}
/deep/.backmain{
  background: #fff;
}
</style>